<script setup lang="ts">
import { reactive, ref } from "vue";
import { computed } from "vue";

// 变量
const time = ref("");
const name = ref("");
const phone = ref("");
const salary = ref("");
const type = ref("");

const currentEditIndex = ref(-1); // 新增：当前编辑行的索引
const dialogFormVisible = ref(false); // 对话框可见性

// 响应式数据
const formLabelWidth = '140px';

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
});


const value = ref('')
const options = reactive([
  {
    value: ' 1',
    label: ' 总经理',
  },
  {
    value: '2',
    label: '人员',
  },
  {
    value: '3',
    label: '业务专员',
  },
  {
    value: '4',
    label: '导游',
  },
  {
    value: '5',
    label: '财务兼行政人员',
  },
])

const tableData = reactive([
  {
    salary: 5300,
    phone: "123456788",
    date: "2016-05-03",
    name: "Tom",
    type: '导游',
  },
  {
    salary: 5060,
    phone: "1234567891",
    date: "2016-05-02",
    name: "John",
    type: '业务专员',
  },
  {
    salary: 5090,
    phone: "1234567892",
    date: "2016-05-04",
    name: "Morgan",
    type: '总经理',
  },
  {
    salary: 5400,
    phone: "1234567893",
    date: "2016-05-01",
    name: "Jessy",
    type: '财务兼行政人员',
  },
]);

// 搜索功能
const search = ref("");
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);

// 方法

function add() {
  if(time.value == "" || time.value.trim() == ''){
    alert('请选择添加的时间')
  }else if(name.value == ""  || name.value.trim() == ''){
    alert('请输入姓名')
  }else if(phone.value == ''  || phone.value.trim() == ''){
    alert('请输入电话号码')
  }else if(salary.value == ""  ||  salary.value.trim() == ''){
    alert("请输入工资")
  }else{
  // 添加数据方法
  tableData.push({
    salary: Number(salary.value),
    phone: phone.value,
    date: time.value,
    name: name.value,
    type: value.value,
  });
}
  time.value = "";
  name.value = "";
  phone.value = "";
  salary.value = "";
  type.value = ''
}

function userTime() {
  // 验证时间格式
  const reg = /^\d{4}-\d{2}-\d{2}$/;
  if (!reg.test(time.value)) {
    alert("请输入正确的日期格式(YYYY-MM-DD)");
    time.value = "";
  }
}

function userName() {
  // 验证姓名不能为空
  if (name.value.trim() === "") {
    alert("姓名不能为空");
    name.value = "";
  }
}

function userPhone() {
  // 验证手机号码格式
  const reg = /^1[3-9]\d{9}$/;
  if (!reg.test(phone.value)) {
    alert("请输入正确的电话号码");
    phone.value = "";
  }
}

function userSalary() {
  // 验证工资为数字
  const reg = /^\d+$/;
  if (!reg.test(salary.value)) {
    alert("请输入正确的工资（数字）");
    salary.value = "";
  }
}

// 删除数据
function handleDelete(index: number) {
  tableData.splice(index, 1);
}

// 打开编辑对话框
function openEditDialog(index: number) {
  currentEditIndex.value = index;
  // 加载对应行的数据到表单
  const row = tableData[index];
  Xtime.value = row.date;
  Xname.value = row.name;
  Xphone.value = row.phone;
  Xtype.value = row.type;
  Xsalary.value = row.salary.toString();
  dialogFormVisible.value = true;
}

// 确认修改
function primary() {
  if (currentEditIndex.value !== -1) {
    const index = currentEditIndex.value;
    tableData[index].name = Xname.value;
    tableData[index].date = Xtime.value;
    tableData[index].phone = Xphone.value;
    tableData[index].salary = Number(Xsalary.value);
    tableData[index].type = Xtype.value;
    closeDialog();
  }
}

// 关闭对话框
function closeDialog() {
  dialogFormVisible.value = false;
  currentEditIndex.value = -1;
}

// 修改表单数据
const Xtime = ref("");
const Xname = ref("");
const Xphone = ref("");
const Xsalary = ref("");
const Xtype = ref("");
</script>

<template>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="时间" prop="date" />
    <el-table-column label="姓名" prop="name" />   
    <el-table-column label="工资" prop="salary" />
    <el-table-column label="电话" prop="phone" />
    <el-table-column label="职位" prop="type" />
    <el-select
    v-model="value"
    clearablea
    placeholder="Select"
    style="width: 240px"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="搜索" />
      </template>
      <template #default="scope">
        <el-button @click="openEditDialog(scope.$index)" size="small">修改</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <!-- 将对话框移到表格外部，使其成为单例 -->
 <!-- 将对话框移到表格外部，使其成为单例 -->
<el-dialog v-model="dialogFormVisible" title="修改用户对话框" width="500">
  <el-form :model="form">
    <el-form-item label="日期" :label-width="formLabelWidth">
      <el-input v-model="Xtime" autocomplete="off" />
    </el-form-item>
    <el-form-item label="用户名" :label-width="formLabelWidth">
      <el-input v-model="Xname" autocomplete="off" />
    </el-form-item>
    <el-form-item label="电话" :label-width="formLabelWidth">
      <el-input v-model="Xphone" autocomplete="off" />
    </el-form-item>
    <el-form-item label="工资" :label-width="formLabelWidth">
      <el-input v-model="Xsalary" autocomplete="off" />
    </el-form-item>
    <el-form-item label="职位" :label-width="formLabelWidth">
      <el-select v-model="Xtype" clearable placeholder="Select" style="width: 240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
  </el-form>
  <div class="dialog-footer">
    <el-button @click="closeDialog">取消</el-button>
    <el-button type="primary" @click="primary">确认</el-button>
  </div>
</el-dialog>

  <div class="box3">
    <el-input v-model="time" style="width: 240px" placeholder="请输入日期" @blur="userTime" />
    <el-input v-model="name" style="width: 240px" placeholder="请输入用户名" @blur="userName" />
    <el-input v-model="phone" style="width: 240px" placeholder="请输入电话号码" @blur="userPhone" />
    <el-input v-model="salary" style="width: 240px" placeholder="请输入工资" @blur="userSalary" />
    <el-select
    v-model="value"
    clearable
    placeholder="Select"
    style="width: 240px"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    <el-button type="success" @click="add">添加</el-button>
  </div>
</template>

<style>
.box3 {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>